<style scoped>
  .footer{
    width:100%;
    position: fixed;
    left:0;
    bottom:0px;
    /*height:60px;*/
    z-index: 10;
    box-shadow: 3px 3px 4px 3px #e9e9e9;
  }
  .footer ul{
    display: flex;
    flex-direction: row;
    height:100%;
    background: #ffffff;
  }
  .footer ul li{
    flex: 1;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-touch-callout: none;
  }
  .footer ul li a{
    text-align: center;
    padding-bottom: 2px;
    /*margin-top: 2px;*/
  }
  .footer ul li h4{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 2px;
    letter-spacing:2px;
    color: #7f7a8e;
    margin-top: -2px;
    /*padding-bottom: 4px;*/
  }
  .footer ul li i{
    font-size: 2.2rem;
  }
  /*@media screen and (max-width: 320px) {
    .footer ul li i{
      font-size: 2.2rem;
    }
  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .footer ul li i{
      font-size: 2.5rem;
    }
  }
  @media screen and (min-width: 376px){
    .footer ul li i{
      font-size: 2.8rem;
    }
  }*/
  .footer ul li p{
    color: #a4a3a9;
  }
  .router-link-active p{
    color: #4D63EB!important;
  }
  .iconShow {
    color: #4D63EB !important;
  }
  .iconRotate {
    transform: rotate(45deg)
  }
</style>

<template>
  <div class="footer">
    <ul id="ul">
        <li v-for="(item,idx) in icons"
            :key="idx"
            :class="{ jia : idx === 2 }"
            @click="gotoPage(item)">
          <a>
            <i>
              <svg class="icon"
                   aria-hidden="true">
                <use v-if="$route.matched[1] && $route.matched[1].path === item.href" :xlink:href="item.iconActive"></use>
                <use v-else :xlink:href="item.icon"></use>
              </svg>
            </i>
            <h4 :class="{ iconShow : $route.matched[1] && $route.matched[1].path === item.href }">{{item.title}}</h4>
          </a>

        </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        icons: this.$config.footerMenu,
        delay: 500, // 禁止连点
        isContinuity: false
      }
    },
    created () {

    },
    methods: {
      gotoPage (item) {
        if (this.$route.matched[1] && this.$route.matched[1].path === item.href) {
          if (this.isContinuity) return
          this.isContinuity = true
          this.$store.state.reload = !this.$store.state.reload
          setTimeout(() => {
            this.isContinuity = false
          }, this.delay)
        }
        this.$router.push(item.href)
      }
    }
  }
</script>
